<template>
  <section v-if="isLoaded">
    <section :class="{'index-wrap':true,'index-wrap-show':offDia?true:false}">
      <div class="dis-cen op-btn-wrap" @click="offDia=!offDia">
        <img v-if="offDia" src="../../../assets/icon/close.png" alt>
        <img v-else src="../../../assets/icon/toady-sta.png" alt>
      </div>

      <h1 class="dis-spa tit-font" @click="showOne('todayStatis')">
        <span>今日情况统计</span>
        <img
          :class="{'ani-icon':true,'ani-icon-open':show.todayStatis}"
          src="../../../assets/icon/jiantou.png"
          alt
        >
      </h1>
      <transition name="show">
        <section v-show="show.todayStatis" class="today-statis-wrap">
          <section class="section-par">
            <section
              :class="{'section-wrap':true,'section-active':show.statisType==1}"
              @click="toggerStaType(1)"
            >
              <h5>发油总数量(L)</h5>
              <p>{{ indexData.retailFuel.retailFuelAll }}</p>
            </section>
            <section
              :class="{'section-wrap':true,'section-active':show.statisType==2}"
              @click="toggerStaType(2)"
            >
              <h5>收油总数量(L)</h5>
              <p>{{ indexData.received.receivedAll }}</p>
            </section>
            <section
              :class="{'section-wrap':true,'section-active':show.statisType==3}"
              @click="toggerStaType(3)"
            >
              <h5>加油总数量(L)</h5>
              <p>{{ indexData.refuel.refuelAll }}</p>
            </section>
            <section
              :class="{'section-wrap':true,'section-active':show.statisType==4}"
              @click="toggerStaType(4)"
            >
              <h5>库存总数量(L)</h5>
              <p>{{ indexData.stock.stockAll }}</p>
            </section>
            <section
              :class="{'section-wrap':true,'section-active':show.statisType==5}"
              @click="toggerStaType(5)"
            >
              <h5>预警报警次数(N)</h5>
              <p>{{ indexData.alarm.alarmAll }}</p>
            </section>
            <section
              :class="{'section-wrap':true,'section-active':show.statisType==6}"
              @click="toggerStaType(6)"
            >
              <h5>出入记录(N)</h5>
              <p>{{ indexData.access.accessAll }}</p>
            </section>
          </section>
          <div>
            <div v-if="show.statisType==1" class="oil-wrap">
              <h4 class="oil-tit">发油总数量(L)</h4>
              <p class="all-oil-num">{{ indexData.retailFuel.retailFuelAll }}</p>
              <p
                v-for="(val,index) in indexData.retailFuel.retailFuelLists"
                :key="index"
                class="dis-start oil-list"
              >
                <span>{{ val.oils }}：</span>
                <span>{{ val.total }}L</span>
              </p>
              <p class="dis-start oil-list">
                <span>累计发油次数(N)：</span>
                <span>{{ indexData.retailFuel.retailFuelAllNum }}</span>
              </p>

              <p
                class="dis-start oil-list more-record"
                @click="goInfo({
                  title: '发油记录统计查询',
                  component: 'HairOilRecord'
                })"
              >>> 更多</p>
            </div>
            <div v-if="show.statisType==2" class="oil-wrap">
              <h4 class="oil-tit">收油总数量(L)</h4>
              <p class="all-oil-num">{{ indexData.received.receivedAll }}</p>
              <p
                v-for="(val,index) in indexData.received.receivedLists"
                :key="index"
                class="dis-start oil-list"
              >
                <span>{{ val.oils }}：</span>
                <span>{{ val.count }}L</span>
              </p>
              <p
                class="dis-start oil-list more-record"
                @click="goInfo({
                  title: '收油记录统计查询',
                  component: 'OilCollectRecord'
                })"
              >>> 更多</p>
            </div>
            <div v-if="show.statisType==3" class="oil-wrap">
              <h4 class="oil-tit">加油总油量(L)</h4>
              <p class="all-oil-num">{{ indexData.refuel.refuelAll }}</p>
              <p
                v-for="(val,index) in indexData.refuel.refuelLists"
                :key="index"
                class="dis-start oil-list"
              >
                <span>{{ val.oils }}：</span>
                <span>{{ val.total }}L</span>
              </p>
              <p class="dis-start oil-list">
                <span>累计加油次数(N)：</span>
                <span>{{ indexData.refuel.refuelAllNum }}</span>
              </p>
              <p
                class="dis-start oil-list more-record"
                @click="goInfo({
                  title: '加油情况统计分析',
                  component: 'ByOil'
                })"
              >>> 更多</p>
            </div>
            <div v-if="show.statisType==4" class="oil-wrap">
              <h4 class="oil-tit">库存总数量(L)</h4>
              <p class="all-oil-num">{{ indexData.stock.stockAll }}</p>
              <p
                v-for="(val,index) in indexData.stock.stockArr"
                :key="index"
                class="dis-start oil-list"
              >
                <span>{{ val.name }}：</span>
                <span>{{ val.value }}L</span>
              </p>
              <p
                class="dis-start oil-list more-record"
                @click="goInfo({
                  title: '油站油品收纳情况分析',
                  component: 'OilStorage'
                })"
              >>> 更多</p>
            </div>
            <div v-if="show.statisType==5" class="oil-wrap">
              <h4 class="oil-tit">预警报警次数(N)</h4>
              <p class="all-oil-num">{{ indexData.alarm.alarmAll }}</p>
              <p
                class="dis-start oil-list more-record"
                @click="goInfo({
                  title: '预警报警记录',
                  component: 'AlarmRecord'
                })"
              >>> 更多</p>
            </div>
            <div v-if="show.statisType==6" class="oil-wrap">
              <h4 class="oil-tit">出入记录(N)</h4>
              <p class="all-oil-num">{{ indexData.access.accessAll }}</p>
              <p class="dis-start oil-list more-record">>> 更多</p>
            </div>
          </div>
        </section>
      </transition>
      <h1 class="dis-spa tit-font today-peo-font" @click="showOne('duty')">
        <span>值班信息</span>
        <img
          :class="{'ani-icon':true,'ani-icon-open':show.duty}"
          src="../../../assets/icon/jiantou.png"
          alt
        >
      </h1>
      <transition name="show">
        <div v-show="show.duty" class="duty-wrap">
          <p class="dis-start oil-list">
            <span>今日值班人员：</span>
            <span>{{ uinfo.chineseName }}</span>
          </p>
        </div>
      </transition>
    </section>
    <!-- <div class="back-model" /> -->
  </section>
</template>

<script>
import { countAll } from '@/api/indexController'
export default {
  name: 'TodayStatistics',
  components: {},
  data() {
    return {
      // 控制整个组件显示与否
      offDia: false,
      isLoaded: false,
      show: {
        // 今日统计显示
        todayStatis: true,
        // 今日情况统计具体展示 1：发油总数量  2：收油总数量  3：加油总数量   4：库存总数量   5：预警报警次数   6：出入记录
        statisType: 1,
        // 值班信息显示
        duty: false
      },
      // 用户信息-用于展示值班
      uinfo: {},
      indexData: {}
    }
  },
  created() {
    this.uinfo = this.$store.state.user.uinfo
    countAll({
      startTime: 1584031641
    })
      .then(res => {
        const stock = res.data.stock
        const refuel = res.data.refuel.refuelLists
        const retailFuel = res.data.retailFuel.retailFuelLists
        let stockAll = 0
        let refuelAllNum = 0
        let retailFuelAllNum = 0
        for (const i in stock) {
          stockAll += stock[i].value
        }
        for (const i in refuel) {
          refuelAllNum += refuel[i].num
        }
        for (const i in retailFuel) {
          retailFuelAllNum += retailFuel[i].num
        }
        res.data.stock = {
          stockAll: stockAll,
          stockArr: stock
        }
        res.data.refuel.refuelAllNum = refuelAllNum
        res.data.retailFuel.retailFuelAllNum = retailFuelAllNum
        this.indexData = res.data
        this.isLoaded = true
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    // 控制显示板块,切换title
    showOne(key) {
      switch (key) {
        case 'todayStatis':
          this.show.todayStatis = !this.show.todayStatis
          break
        case 'duty':
          this.show.duty = !this.show.duty
          break
      }
    },
    // 切换油种类详情
    toggerStaType(type) {
      this.show.statisType = type
    },
    goInfo(json) {
      this.$store.dispatch('window/addTabItem', json)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/com.scss";
@import "~@/styles/variables.scss";
.show-enter-active,
.show-leave-active {
  transition: all 0.3s;
}

.show-enter,
.show-leave-active {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
}
.index-wrap {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  bottom: 0;
  height: 100%;
  background: $nodeLightBk;
  z-index: 500;
  transition: 0.4s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.index-wrap-show {
  right: 0;
}
.today-statis-wrap {
  max-height: calc(100% - 45px);
  overflow: auto;
}
.tit-font {
  margin: 0;
  padding: 8px 18px;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 10px 10px -4px #5b8080;
  cursor: pointer;
  .ani-icon {
    width: 22px;
    height: auto;
    transition: 0.5s;
    transform: rotateZ(90deg);
  }
  .ani-icon-open {
    transform: rotateZ(-90deg);
  }
}
.section-par {
  column-count: 2;
  column-rule: 1px solid $nodeBorder;
  column-gap: 0;
  .section-wrap {
    padding-bottom: 15px;
    text-align: center;
    overflow: auto;
    border-bottom: 1px solid $nodeBorder;
    cursor: pointer;
    h5 {
      padding-top: 18px;
      margin: 0;
      font-size: 1px;
      color: rgba(255, 255, 255, 0.7);
    }
    p {
      padding-top: 10px;
      margin: 0;
      font-size: 24px;
      color: #fff;
    }
  }
  .section-active {
    background: #587584;
  }
}
.oil-wrap {
  padding: 10px;
  margin: 0 10px 50px;
  border-bottom: 1px solid $nodeBorder;
  .oil-tit {
    margin: 0;
    padding-top: 25px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
  }
  .all-oil-num {
    margin-top: 10px;
    font-size: 25px;
    color: #ffeb3b;
    text-align: center;
  }
  .more-record {
    color: #1bd6ab;
    cursor: pointer;
  }
}
.oil-list {
  padding-left: 15px;
  color: #fff;
  span {
    &:first-of-type {
      padding-right: 10px;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
.duty-wrap {
  padding: 10px;
}
.op-btn-wrap {
  float: left;
  margin-top: 100%;
  margin-left: -60px;
  width: 60px;
  height: 60px;
  background: $nodeLightBk;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
}
</style>
